<template>
  <div class="login">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">修改密码</div>
      </template>
    </HeaderTop>
    <van-form @submit="onSubmit" class="mt-5">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="oldPassword"
          type="password"
          name="旧密码"
          label="旧密码"
          placeholder="旧密码"
          autocomplete="on"
          :rules="[{ required: true, message: '请填写旧密码' }]"
        />
        <van-field
          v-model="newPassword"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="请输入新密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <van-field
          v-model="newSecondPassword"
          type="password"
          name="确认新密码"
          label="新密码"
          placeholder="请确认新密码"
          autocomplete="off"
          :rules="[{ required: true, message: '请确认新密码' }]"
        />
        <van-field
          v-model="AuthNumber"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          center
        >
          <template #button>
            <van-image v-if="AuthPic" :src="AuthPic.code" height="30px"></van-image>
          </template>
          <template #extra>
            <span class="ml-2" @click="getAuthNumber" v-if="AuthPic">
              <div class="fs-7 text-3" style="line-height: 0.44rem">看不清</div>
              <div class="fs-7 main-color" style="line-height: 0.44rem">换一张</div>
            </span>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="success" native-type="submit"> 确认修改 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getAuth, changePsw } from "@/api";
import { Auth_format, successInfo_format } from "@/type/index";
import { user } from "@/store/index";
import { Toast } from "vant";
const router = useRouter();
const store = user();
const username = ref("");
const oldPassword = ref("");
const newPassword = ref("");
const newSecondPassword = ref("");
const AuthNumber = ref("");
const AuthPic = ref<Auth_format>();
const getAuthNumber = async () => {
  const res = await getAuth<Auth_format>();
  AuthPic.value = res;
};
//登录
const onSubmit = async () => {
  Toast.loading({
    duration: 0,
    forbidClick: true,
    message: "正在修改",
  });
  const res = await changePsw<successInfo_format>(
    username.value,
    oldPassword.value,
    newPassword.value,
    newSecondPassword.value,
    AuthNumber.value
  );
  Toast.clear();
  if (res.status == 1) {
    Toast.success("修改成功");
    store.logout();
    router.replace({
      name: "Login",
    });
  } else {
    AuthNumber.value = "";
    Toast.fail("修改失败");
    getAuthNumber();
  }
  const timer = setTimeout(() => {
    Toast.clear();
    clearTimeout(timer);
  }, 1000);
};
//初始化函数
const initData = () => {
  //获取验证码
  getAuthNumber();
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.login {
  position: absolute;
  @include wh(100%, auto);
  min-height: 100%;
  left: 0;
  top: 0;
  background-color: #f7f8fa;
}
</style>
